<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高端智能手机 - 灰鲸商城</title>
    <!-- 外部资源 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="https://img.icons8.com/dusk/64/shopping-bag.png" type="image/x-icon">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .product-image-zoom {
                transition: transform 0.3s ease;
            }
            .product-image-zoom:hover {
                transform: scale(1.05);
            }
            .quantity-btn {
                @apply w-10 h-10 flex items-center justify-center border rounded-md hover:bg-gray-100 transition-colors;
            }
            .tab-active {
                @apply border-b-2 border-primary text-primary font-medium;
            }
            .line-clamp-2 {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<div id="app" class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- 品牌标志 -->
                <div class="flex items-center">
                    <a href="/" class="text-2xl font-bold text-primary flex items-center">
                        <i class="fas fa-shopping-bag mr-2"></i>
                        <span>灰鲸商城</span>
                    </a>
                </div>

                <!-- 搜索栏 - 仅在桌面显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input
                                type="text"
                                placeholder="搜索商品..."
                                class="w-full py-2 px-4 pr-10 rounded-full border focus:outline-none focus:ring-2 focus:ring-primary/50"
                        >
                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-1 md:space-x-4">
                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100 relative" title="购物车">
                        <i class="fas fa-shopping-cart text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
                    </button>

                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100" title="消息">
                        <i class="fas fa-bell text-lg"></i>
                    </button>

                    <div class="relative group">
                        <button class="flex items-center space-x-1 p-1 rounded-full hover:bg-gray-100">
                            <img
                                    :src="user.avatar"
                                    alt="用户头像"
                                    class="w-8 h-8 rounded-full object-cover border border-gray-200"
                            >
                            <span class="hidden md:inline font-medium">{{ user.username || '登录/注册' }}</span>
                            <i class="fas fa-chevron-down text-xs opacity-70"></i>
                        </button>

                        <!-- 用户菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10 hidden group-hover:block transition-all">
                            <a href="/profile.html" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-user mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-heart mr-2"></i>我的收藏
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-box mr-2"></i>我的订单
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <button @click="logout" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 面包屑导航 -->
    <div class="bg-white border-b">
        <div class="container mx-auto px-4 py-3 text-sm text-gray-500">
            <a href="/" class="hover:text-primary">首页</a>
            <span class="mx-2"><i class="fas fa-chevron-right text-xs"></i></span>
            <a href="#" class="hover:text-primary">{{ product.category || '数码电子' }}</a>
            <span class="mx-2"><i class="fas fa-chevron-right text-xs"></i></span>
            <span class="text-gray-700">{{ product.name }}</span>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="flex-1 container mx-auto px-4 py-6 md:py-10">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <!-- 商品图片和信息 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6 md:p-8">
                <!-- 商品图片 -->
                <div class="space-y-4">
                    <!-- 主图 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden border p-4">
                        <img
                                :src="product.MainImage"
                                :alt="product.name"
                                class="w-full h-auto object-contain product-image-zoom"
                                @error="product.MainImage = 'https://picsum.photos/800/800'"
                        >
                    </div>

                    <!-- 缩略图 -->
                    <div class="grid grid-cols-4 gap-3">
                        <div
                                v-for="(img, index) in product.images || [product.MainImage]"
                                :key="index"
                                class="bg-gray-50 rounded-md overflow-hidden border cursor-pointer hover:border-primary transition-colors"
                                @click="setMainImage(img)"
                        >
                            <img :src="img" :alt="product.name" class="w-full h-20 object-cover">
                        </div>
                    </div>
                </div>

                <!-- 商品信息 -->
                <div class="space-y-6">
                    <div>
                        <h1 class="text-2xl md:text-3xl font-bold text-gray-800 leading-tight mb-2">
                            {{ product.name }}
                        </h1>
                        <div class="flex items-center text-amber-500 mb-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="ml-2 text-gray-600 text-sm">
                                    4.8 ({{ product.reviews || 126 }} 评价)
                                </span>
                        </div>
                        <p class="text-gray-600 line-clamp-2">{{ product.description }}</p>
                    </div>

                    <!-- 价格信息 -->
                    <div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
                        <div class="flex items-baseline mb-2">
                            <span class="text-danger text-3xl md:text-4xl font-bold">¥{{ product.price }}</span>
                            <span class="ml-3 text-gray-500 line-through">¥{{ product.original_price }}</span>
                            <span class="ml-3 bg-danger text-white text-sm px-2 py-1 rounded-full">
                                    {{ product.discount }}折
                                </span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <span class="text-danger font-medium">{{ product.sales || 328 }}</span>
                            人已购买 | 库存: <span class="font-medium">{{ product.stock || 1000 }}+</span>
                        </div>
                    </div>

                    <!-- 规格选择 -->
                    <div v-if="product.specs && product.specs.length">
                        <h3 class="text-gray-700 font-medium mb-3">选择规格</h3>
                        <div class="space-y-3">
                            <div v-for="(spec, specIndex) in product.specs" :key="specIndex">
                                <p class="text-sm text-gray-600 mb-2">{{ spec.name }}:</p>
                                <div class="flex flex-wrap gap-2">
                                    <button
                                            v-for="(option, optIndex) in spec.options"
                                            :key="optIndex"
                                            class="px-4 py-2 border rounded-md text-sm hover:border-primary transition-colors"
                                            :class="selectedSpecs[specIndex] === optIndex ? 'border-primary bg-primary/5' : ''"
                                            @click="selectedSpecs[specIndex] = optIndex"
                                    >
                                        {{ option }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数量选择 -->
                    <div>
                        <h3 class="text-gray-700 font-medium mb-3">购买数量</h3>
                        <div class="flex items-center w-40">
                            <button
                                    class="quantity-btn"
                                    @click="decrementQuantity"
                                    :disabled="quantity <= 1"
                            >
                                <i class="fas fa-minus"></i>
                            </button>
                            <input
                                    type="number"
                                    v-model="quantity"
                                    min="1"
                                    :max="product.stock || 1000"
                                    class="mx-1 w-12 h-10 border-y text-center focus:outline-none"
                            >
                            <button
                                    class="quantity-btn"
                                    @click="incrementQuantity"
                                    :disabled="quantity >= (product.stock || 1000)"
                            >
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <button
                                class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center"
                                @click="addToCart"
                        >
                            <i class="fas fa-shopping-cart mr-2"></i>
                            加入购物车
                        </button>
                        <button
                                class="flex-1 bg-danger hover:bg-danger/90 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center"
                                @click="buyNow"
                        >
                            <i class="fas fa-check mr-2"></i>
                            立即购买
                        </button>
                        <button
                                class="w-12 h-12 border rounded-lg flex items-center justify-center text-gray-500 hover:text-danger hover:border-danger transition-colors"
                                @click="toggleFavorite"
                                :class="isFavorite ? 'text-danger border-danger' : ''"
                        >
                            <i class="fas fa-heart"></i>
                        </button>
                    </div>

                    <!-- 服务保障 -->
                    <div class="pt-4 border-t border-gray-100">
                        <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-600">
                            <div class="flex items-center">
                                <i class="fas fa-truck text-primary mr-1"></i>
                                <span>全场免运费</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-shield-alt text-primary mr-1"></i>
                                <span>正品保障</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-exchange-alt text-primary mr-1"></i>
                                <span>7天无理由退换</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-headphones-alt text-primary mr-1"></i>
                                <span>24小时客服</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品详情选项卡 -->
            <div class="border-t">
                <div class="flex border-b overflow-x-auto">
                    <button
                            class="px-6 py-4 text-base font-medium whitespace-nowrap"
                            :class="activeTab === 'details' ? 'tab-active' : ''"
                            @click="activeTab = 'details'"
                    >
                        商品详情
                    </button>
                    <button
                            class="px-6 py-4 text-base font-medium whitespace-nowrap"
                            :class="activeTab === 'specification' ? 'tab-active' : ''"
                            @click="activeTab = 'specification'"
                    >
                        规格参数
                    </button>
                    <button
                            class="px-6 py-4 text-base font-medium whitespace-nowrap"
                            :class="activeTab === 'reviews' ? 'tab-active' : ''"
                            @click="activeTab = 'reviews'"
                    >
                        用户评价 ({{ product.reviews || 126 }})
                    </button>
                </div>

                <!-- 选项卡内容 -->
                <div class="p-6 md:p-8">
                    <!-- 商品详情 -->
                    <div v-if="activeTab === 'details'">
                        <div class="prose max-w-none">
                            <h2 class="text-2xl font-bold mb-6">产品介绍</h2>
                            <div class="space-y-6">
                                <p class="text-gray-700 leading-relaxed">
                                    {{ product.longDescription || product.description + ' 这是一款高品质的产品，采用先进技术制造，具有卓越的性能和可靠性。设计精美，操作简便，适合各种使用场景。' }}
                                </p>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
                                    <img src="https://picsum.photos/600/400?random=1" alt="产品细节图" class="w-full h-auto rounded-lg">
                                    <img src="https://picsum.photos/600/400?random=2" alt="产品细节图" class="w-full h-auto rounded-lg">
                                </div>
                                <h3 class="text-xl font-semibold mt-8 mb-4">产品特点</h3>
                                <ul class="list-disc pl-5 space-y-2">
                                    <li>高性能处理器，运行速度快</li>
                                    <li>优质材料，耐用性强</li>
                                    <li>节能环保，符合国家标准</li>
                                    <li>多种功能，满足不同需求</li>
                                    <li>简单易用，操作便捷</li>
                                </ul>
                                <div class="my-8">
                                    <img src="https://picsum.photos/1200/500?random=3" alt="产品展示图" class="w-full h-auto rounded-lg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 规格参数 -->
                    <div v-if="activeTab === 'specification'">
                        <div class="overflow-x-auto">
                            <table class="w-full border-collapse">
                                <tbody>
                                <tr v-for="(param, index) in product.parameters || defaultParams" :key="index" class="border-b border-gray-100">
                                    <td class="py-3 px-4 text-gray-600 bg-gray-50 w-1/3">
                                        {{ param.name }}
                                    </td>
                                    <td class="py-3 px-4 text-gray-800">
                                        {{ param.value }}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 用户评价 -->
                    <div v-if="activeTab === 'reviews'">
                        <div class="flex flex-col md:flex-row gap-8">
                            <!-- 评价统计 -->
                            <div class="md:w-1/4">
                                <div class="text-center p-6 bg-gray-50 rounded-lg">
                                    <div class="text-5xl font-bold text-gray-800 mb-2">4.8</div>
                                    <div class="flex items-center justify-center text-amber-500 mb-4">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star-half-alt"></i>
                                    </div>
                                    <div class="space-y-2 text-sm">
                                        <div class="flex justify-between">
                                            <span>5星</span>
                                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                                <div class="bg-amber-500 h-2 rounded-full" style="width: 75%"></div>
                                            </div>
                                            <span>75%</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>4星</span>
                                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                                <div class="bg-amber-500 h-2 rounded-full" style="width: 15%"></div>
                                            </div>
                                            <span>15%</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>3星</span>
                                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                                <div class="bg-amber-500 h-2 rounded-full" style="width: 7%"></div>
                                            </div>
                                            <span>7%</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>2星</span>
                                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                                <div class="bg-amber-500 h-2 rounded-full" style="width: 2%"></div>
                                            </div>
                                            <span>2%</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>1星</span>
                                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                                <div class="bg-amber-500 h-2 rounded-full" style="width: 1%"></div>
                                            </div>
                                            <span>1%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 评价列表 -->
                            <div class="md:w-3/4 space-y-6">
                                <div class="flex justify-between items-center">
                                    <h3 class="text-xl font-bold">用户评价</h3>
                                    <el-select v-model="reviewFilter" placeholder="全部评价" size="small">
                                        <el-option label="全部评价" value="all"></el-option>
                                        <el-option label="好评" value="good"></el-option>
                                        <el-option label="中评" value="medium"></el-option>
                                        <el-option label="差评" value="bad"></el-option>
                                    </el-select>
                                </div>

                                <div v-for="(review, index) in filteredReviews" :key="index" class="border-b border-gray-100 pb-6">
                                    <div class="flex items-start">
                                        <img :src="review.avatar" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                        <div class="ml-3 flex-1">
                                            <div class="flex justify-between">
                                                <div>
                                                    <h4 class="font-medium">{{ review.username }}</h4>
                                                    <div class="flex text-amber-500 mt-1">
                                                        <i class="fas fa-star" v-for="n in review.rating" :key="n"></i>
                                                        <i class="far fa-star" v-for="n in 5 - review.rating" :key="n + 5"></i>
                                                    </div>
                                                </div>
                                                <span class="text-sm text-gray-500">{{ review.date }}</span>
                                            </div>
                                            <p class="mt-3 text-gray-700">{{ review.content }}</p>
                                            <div class="mt-3 flex gap-2">
                                                <img :src="img" alt="评价图片" class="w-20 h-20 object-cover rounded-md" v-for="(img, i) in review.images" :key="i">
                                            </div>
                                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                                <button class="flex items-center hover:text-primary">
                                                    <i class="far fa-thumbs-up mr-1"></i>
                                                    <span>{{ review.likes }}</span>
                                                </button>
                                                <span class="mx-3">|</span>
                                                <span>规格：{{ review.spec }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 加载更多 -->
                                <div class="text-center pt-4">
                                    <button class="px-6 py-2 border rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                                        加载更多评价
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关推荐 -->
        <div class="mt-12">
            <h2 class="text-2xl font-bold mb-6">相关推荐</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <div
                        class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                        v-for="item in relatedProducts"
                        :key="item.id"
                        @click="goToProductDetail(item.id)"
                >
                    <div class="aspect-square bg-gray-50 overflow-hidden">
                        <img :src="item.MainImage" :alt="item.name" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-3">
                        <h3 class="text-sm font-medium line-clamp-2 h-12">{{ item.name }}</h3>
                        <div class="mt-2 flex items-center">
                            <span class="text-danger font-bold">¥{{ item.price }}</span>
                            <span class="ml-2 text-xs text-gray-500 line-through">¥{{ item.original_price }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">灰鲸商城</h3>
                    <p class="text-gray-400 text-sm">提供高品质的灰鲸产品和优质的购物体验</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div>
                    <h4 class="font-medium mb-4">购物指南</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">购物流程</a></li>
                        <li><a href="#" class="hover:text-white">支付方式</a></li>
                        <li><a href="#" class="hover:text-white">配送方式</a></li>
                        <li><a href="#" class="hover:text-white">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">售后服务</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">退换货政策</a></li>
                        <li><a href="#" class="hover:text-white">保修政策</a></li>
                        <li><a href="#" class="hover:text-white">投诉建议</a></li>
                        <li><a href="#" class="hover:text-white">售后服务</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 400-123-4567</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@example.com</li>
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 北京市朝阳区科技园</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2025 灰鲸商城 版权所有</p>
            </div>
        </div>
    </footer>
</div>

<script>
    // 全局配置
    const AppConfig = {
        api: {
            productDetail: '/api/product',
            addToCart: '/api/cart/add',
            favorite: '/api/favorite',
            userInfo: '/api/user/info'
        },
        defaults: {
            defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
    };

    // 解析URL参数获取商品ID
    const getProductId = () => {
        const params = new URLSearchParams(window.location.search);
        return params.get('id') || 1; // 默认获取ID为1的商品
    };

    // 创建Vue应用
    const { createApp, ref, reactive, onMounted, computed } = Vue;
    const { ElMessage, ElSelect, ElOption } = ElementPlus;

    const app = createApp({
        setup() {
            // 状态管理
            const product = ref({
                id: 1,
                name: "高端智能手机",
                description: "最新款旗舰手机，性能强劲，拍照效果出色，续航持久。",
                longDescription: "最新款旗舰手机搭载了先进的处理器，性能强劲，能够轻松应对各种复杂任务。配备高像素摄像头系统，拍照效果出色，无论是白天还是夜晚都能拍出清晰动人的照片。大容量电池确保了持久的续航能力，让您无需频繁充电。精致的外观设计，手感舒适，是您的理想选择。",
                price: 3999,
                original_price: 4999,
                discount: 8,
                MainImage: "https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
                images: [
                    "https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
                    "https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
                    "https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                ],
                specs: [
                    {
                        name: "颜色",
                        options: ["黑色", "白色", "银色", "蓝色"]
                    },
                    {
                        name: "存储容量",
                        options: ["128GB", "256GB", "512GB"]
                    }
                ],
                parameters: [
                    { name: "品牌", value: "灰鲸科技" },
                    { name: "型号", value: "X1 Pro" },
                    { name: "处理器", value: "八核处理器" },
                    { name: "内存", value: "8GB" },
                    { name: "电池容量", value: "4500mAh" },
                    { name: "摄像头", value: "后置四摄 6400万像素" },
                    { name: "屏幕尺寸", value: "6.7英寸" },
                    { name: "保修期限", value: "1年" }
                ],
                sales: 328,
                stock: 1000,
                category: "数码电子",
                categoryId: 2,
                reviews: 126
            });

            const relatedProducts = ref([
                {
                    id: 2,
                    name: "智能手表 Pro",
                    price: 1599,
                    original_price: 1999,
                    MainImage: "https://images.unsplash.com/photo-1523275335684-38269d6639fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                },
                {
                    id: 5,
                    name: "蓝牙音箱",
                    price: 399,
                    original_price: 499,
                    MainImage: "https://images.unsplash.com/photo-1545454675-3531b543be5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                },
                {
                    id: 6,
                    name: "无线充电器",
                    price: 199,
                    original_price: 299,
                    MainImage: "https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                },
                {
                    id: 8,
                    name: "智能耳机",
                    price: 899,
                    original_price: 1099,
                    MainImage: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                },
                {
                    id: 9,
                    name: "移动电源",
                    price: 249,
                    original_price: 299,
                    MainImage: "https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                }
            ]);

            const loading = ref(false);
            const error = ref('');

            // 用户信息
            const user = reactive({
                id: 1,
                username: '灰鲸用户',
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                isLoggedIn: true
            });

            // 页面状态
            const activeTab = ref('details');
            const quantity = ref(1);
            const selectedSpecs = ref([0, 0]);
            const isFavorite = ref(false);
            const reviewFilter = ref('all');

            // 默认参数（当接口没有返回时使用）
            const defaultParams = [
                { name: "品牌", value: "示例品牌" },
                { name: "型号", value: "示例型号" },
                { name: "颜色", value: "多种颜色" },
                { name: "材质", value: "高品质材料" },
                { name: "重量", value: "约500g" },
                { name: "尺寸", value: "20x15x5cm" },
                { name: "保修期限", value: "1年" }
            ];

            // 默认评价数据
            const defaultReviews = [
                {
                    id: 1,
                    username: "用户123",
                    avatar: "https://picsum.photos/100/100?random=10",
                    rating: 5,
                    date: "2025-08-15",
                    content: "产品非常好，超出预期，推荐购买！",
                    images: [
                        "https://picsum.photos/200/200?random=20",
                        "https://picsum.photos/200/200?random=21"
                    ],
                    likes: 24,
                    spec: "黑色"
                },
                {
                    id: 2,
                    username: "购物达人",
                    avatar: "https://picsum.photos/100/100?random=11",
                    rating: 4,
                    date: "2025-08-10",
                    content: "东西不错，就是价格有点小贵，总体满意。",
                    images: [],
                    likes: 8,
                    spec: "白色"
                },
                {
                    id: 3,
                    username: "体验者",
                    avatar: "https://picsum.photos/100/100?random=12",
                    rating: 5,
                    date: "2025-08-05",
                    content: "第二次购买了，质量一如既往的好，物流也很快。",
                    images: [
                        "https://picsum.photos/200/200?random=22"
                    ],
                    likes: 15,
                    spec: "银色"
                }
            ];

            // 过滤后的评价
            const filteredReviews = computed(() => {
                if (reviewFilter.value === 'all') return defaultReviews;

                // 根据评分过滤评价
                return defaultReviews.filter(review => {
                    if (reviewFilter.value === 'good') return review.rating >= 4;
                    if (reviewFilter.value === 'medium') return review.rating === 3;
                    if (reviewFilter.value === 'bad') return review.rating <= 2;
                    return true;
                });
            });

            // 获取商品详情
            const fetchProductDetail = async () => {
                try {
                    loading.value = true;
                    error.value = '';

                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 500));

                    // 这里实际上会使用API调用
                    // const productId = getProductId();
                    // const response = await axios.get(`${AppConfig.api.productDetail}/${productId}`, {
                    //     withCredentials: true
                    // });

                    // 模拟响应
                    // product.value = response.data.data;

                    // 初始化规格选择
                    if (product.value.specs && product.value.specs.length) {
                        selectedSpecs.value = product.value.specs.map(() => 0);
                    }

                    // 检查是否已收藏
                    checkFavoriteStatus(product.value.id);

                    // 获取相关商品
                    fetchRelatedProducts(product.value.categoryId);
                } catch (err) {
                    console.error('获取商品详情失败:', err);
                    error.value = err.message || '加载商品详情时发生错误';
                } finally {
                    loading.value = false;
                }
            };

            // 获取相关商品
            const fetchRelatedProducts = async (categoryId) => {
                try {
                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 300));

                    // 实际项目中这里会调用接口
                    // const response = await axios.get(`/api/products?category=${categoryId}`);

                    // 使用模拟数据
                    // relatedProducts.value = response.data.data;
                } catch (err) {
                    console.error('获取相关商品失败:', err);
                }
            };

            // 获取用户信息
            const fetchUserInfo = async () => {
                try {
                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 200));

                    // 实际项目中这里会调用接口
                    // const response = await axios.get(AppConfig.api.userInfo, {
                    //     withCredentials: true
                    // });

                    // 使用模拟数据
                    // const userData = response.data.data;
                    // user.id = userData.id;
                    // user.username = userData.username;
                    // user.avatar = userData.avatar || AppConfig.defaults.defaultAvatar;
                    // user.isLoggedIn = true;
                } catch (err) {
                    console.error('获取用户信息失败:', err);
                    // 保持默认状态
                }
            };

            // 检查商品是否已收藏
            const checkFavoriteStatus = async (productId) => {
                if (!user.isLoggedIn) return;

                try {
                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 200));

                    // 实际项目中这里会调用接口
                    // const response = await axios.get(`${AppConfig.api.favorite}/${productId}`, {
                    //     withCredentials: true
                    // });

                    // 使用模拟数据
                    // isFavorite.value = response.data.data.isFavorite;
                    isFavorite.value = false;
                } catch (err) {
                    console.error('检查收藏状态失败:', err);
                }
            };

            // 切换收藏状态
            const toggleFavorite = async () => {
                if (!user.isLoggedIn) {
                    ElMessage.warning('请先登录');
                    return;
                }

                try {
                    const productId = product.value.id;

                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 300));

                    // 实际项目中这里会调用接口
                    // const response = await axios.post(`${AppConfig.api.favorite}/${productId}`, {}, {
                    //     withCredentials: true
                    // });

                    // 使用模拟响应
                    isFavorite.value = !isFavorite.value;
                    ElMessage.success(isFavorite.value ? '收藏成功' : '取消收藏成功');
                } catch (err) {
                    console.error('切换收藏状态失败:', err);
                    ElMessage.error(err.message || '操作失败');
                }
            };

            // 设置主图
            const setMainImage = (img) => {
                product.value.MainImage = img;
            };

            // 增加数量
            const incrementQuantity = () => {
                if (quantity.value < (product.value.stock || 1000)) {
                    quantity.value++;
                }
            };

            // 减少数量
            const decrementQuantity = () => {
                if (quantity.value > 1) {
                    quantity.value--;
                }
            };

            // 加入购物车
            const addToCart = async () => {
                if (!user.isLoggedIn) {
                    ElMessage.warning('请先登录');
                    return;
                }

                try {
                    // 检查是否选择了所有规格
                    if (product.value.specs && product.value.specs.length && selectedSpecs.value.length < product.value.specs.length) {
                        ElMessage.warning('请选择完整的商品规格');
                        return;
                    }

                    const params = {
                        productId: product.value.id,
                        quantity: quantity.value,
                        specs: selectedSpecs.value.map((val, idx) => ({
                            specId: idx,
                            optionId: val
                        }))
                    };

                    // 模拟API调用
                    await new Promise(resolve => setTimeout(resolve, 500));

                    // 实际项目中这里会调用接口
                    // const response = await axios.post(AppConfig.api.addToCart, params, {
                    //     withCredentials: true
                    // });

                    ElMessage.success('加入购物车成功');
                } catch (err) {
                    console.error('加入购物车失败:', err);
                    ElMessage.error(err.message || '加入购物车失败');
                }
            };

            // 立即购买
            const buyNow = () => {
                if (!user.isLoggedIn) {
                    ElMessage.warning('请先登录');
                    return;
                }

                // 检查是否选择了所有规格
                if (product.value.specs && product.value.specs.length && selectedSpecs.value.length < product.value.specs.length) {
                    ElMessage.warning('请选择完整的商品规格');
                    return;
                }

                // 跳转到结算页面
                const specsStr = selectedSpecs.value.join(',');
                ElMessage.success('即将跳转到结算页面');
                // window.location.href = `/checkout.html?productId=${product.value.id}&quantity=${quantity.value}&specs=${specsStr}`;
            };

            // 跳转到商品详情
            const goToProductDetail = (id) => {
                ElMessage.info(`跳转到商品 ${id}`);
                // window.location.href = `/product-detail.html?id=${id}`;
            };

            // 退出登录
            const logout = async () => {
                if (confirm('确定要退出登录吗？')) {
                    try {
                        // 模拟API调用
                        await new Promise(resolve => setTimeout(resolve, 300));

                        // 实际项目中这里会调用接口
                        // await axios.post('/api/logout', {}, {
                        //     withCredentials: true
                        // });

                        user.id = null;
                        user.username = '';
                        user.avatar = AppConfig.defaults.defaultAvatar;
                        user.isLoggedIn = false;
                        ElMessage.success('已退出登录');
                    } catch (err) {
                        console.error('退出登录失败:', err);
                        user.isLoggedIn = false;
                        ElMessage.success('已退出登录');
                    }
                }
            };

            // 初始化
            onMounted(async () => {
                await fetchUserInfo();
                await fetchProductDetail();

                // 滚动监听，导航栏样式变化
                window.addEventListener('scroll', () => {
                    const header = document.querySelector('header');
                    if (window.scrollY > 50) {
                        header.classList.add('shadow');
                    } else {
                        header.classList.remove('shadow');
                    }
                });
            });

            return {
                product,
                relatedProducts,
                loading,
                error,
                user,
                activeTab,
                quantity,
                selectedSpecs,
                isFavorite,
                reviewFilter,
                filteredReviews,
                defaultParams,
                defaultReviews,

                setMainImage,
                incrementQuantity,
                decrementQuantity,
                addToCart,
                buyNow,
                toggleFavorite,
                goToProductDetail,
                logout
            };
        }
    });

    // 使用Element Plus组件
    app.use(ElementPlus);
    app.mount('#app');
</script>
</body>
</html>